<template>
	<view id="login">
    <view class="lunbo">
      <u-swiper  :list="list3" indicator indicatorMode="line" circular height="300px"></u-swiper>
    </view>
		 <view class="inputBox1" style="margin-top: 100px;">
        <uni-icons class="inputLeft1" type="person-filled" size="36px" ></uni-icons>
        <input class="input1" id="dpho"  placeholder="请输入手机号码" v-model="phone" /><span id="span1"></span>
        <uni-icons @click="phone=''" class="inputRight1" type="clear" size="34px" color="#6b3939 "></uni-icons>
		 </view>
     <view class="inputBox1">
        <uni-icons class="inputLeft1" type="locked-filled" size="36px" ></uni-icons>
        <input class="input1" id="dpsw" :password="hidePsw"  placeholder="请输入密码" v-model="psw" /><span id="span2"></span>
        <uni-icons @click="hidePsw=!hidePsw" class="inputRight1" :type='hidePsw?"eye-filled":"eye-slash-filled"' size="34px" ></uni-icons>
		 </view>
     <view class="BtnBox">
        <button class="Btn" @click="toLogin">登录</button>  
        <button class="Btn" @click="toReg">注册</button>  
     </view>
     
	</view>
</template>

<script>
  import { baseUrl } from '@/config'
export default {
	name: 'LoginIndex',
	data() {
		return {
			phone: '',
      psw:'',
      hidePsw:true,
      list3: [
          baseUrl+'/app/006.jpg',
          baseUrl+'/app/001.jpg',
          baseUrl+'/app/002.jpg',
        ],
		};
	},
	
	onReady() {
		
	},
	methods: {
   
			 toLogin(){
 				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
 					uni.showToast({
 						title: '手机格式不正确！',
 						duration: 2000,
 						icon: 'error'
 					})
 					return;
 				}
 				if (this.psw.length < 6) {
 					uni.showToast({
 						title: '密码格式不正确！',
 						duration: 2000,
 						icon: 'error'
 					})
 					return;
 				}
 				uni.request({
 					url:baseUrl+'/v1/user/userSearch',
 					data: {
 						phone: this.phone,
 						password: this.psw
 					},
        success: (res) => {
            if (res.data.code == 200) {
            uni.removeStorageSync('user');
            uni.setStorageSync('user',res.data)
            uni.showToast({
                title: '登录成功',
                duration: 1000
              });
              setTimeout(function() {
                uni.switchTab({
                  url: "/pages/index/index"
                })
				      }, 1500)
             } 
             else {
            uni.showToast({
              title: "登录失败!账号或者密码不正确!",
              icon: 'none',
              duration: 2000
            })
          }
        }
 				})
 			},
    toReg(){
      uni.navigateTo({
	          url: '/pages/reg/index'
        });
    }
	}
};
</script>

<style scoped lang="scss">
#login{
	width: 100vw;
	height: 100vh;
	background-color: rgba(37, 240, 165, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  .lunbo{
    width: 100vw;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 10px;
   
  }
	.inputBox1{
    padding: 0 32rpx;
    box-sizing: border-box;
    width:100%;
		height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
   .input1{
    flex:1; // 前提是父级要是flex布局
		height: 40px;
    border: 2px solid #1c5389;
    border-radius: 20px;
    padding-left: 10px;
   }
	}
  .BtnBox{
    width: 60%;
    height: 5%;
    margin-top:10% ;
    .Btn{
      width: 100%;
      height: 40px;
      border: 1px solid black;
      border-radius: 20px;
      margin-top:5% ;
      line-height: 40px;

    }
    
  }
}
</style>
